<template>
  <div class="stream-test">
    <h2>流式输出测试</h2>
    <div class="test-container">
      <el-input
        v-model="testMessage"
        placeholder="输入测试消息"
        type="textarea"
        :rows="3"
        class="test-input"
      />
      <el-button type="primary" @click="testStream" :loading="testing">
        测试流式输出
      </el-button>
      
      <div class="output-container">
        <h3>输出结果：</h3>
        <div class="output-content" v-html="outputContent"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { aiApi } from '@/api/ai'

const testMessage = ref('你好，请介绍一下你自己')
const outputContent = ref('')
const testing = ref(false)

// 假设测试用userId和sessionId
const userId = 1
const sessionId = 'test-session-001'

const testStream = async () => {
  if (!testMessage.value.trim()) {
    ElMessage.warning('请输入测试消息')
    return
  }
  testing.value = true
  outputContent.value = ''
  try {
    aiApi.chatStream(
      { userId, sessionId, message: testMessage.value },
      (chunk) => {
        outputContent.value += chunk
      },
      () => {
        testing.value = false
        ElMessage.success('流式输出完成')
      },
      (error) => {
        testing.value = false
        ElMessage.error('流式输出失败: ' + error.message)
      }
    )
  } catch (error) {
    console.error('测试失败:', error)
    testing.value = false
    ElMessage.error('测试失败: ' + error.message)
  }
}
</script>

<style scoped>
.stream-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-container {
  margin-top: 20px;
}

.test-input {
  margin-bottom: 20px;
}

.output-container {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background: #f9f9f9;
}

.output-content {
  white-space: pre-wrap;
  font-family: monospace;
  background: white;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  min-height: 100px;
}
</style> 